<template>
  <div class="demo-block demo-alert">
    <div class="demo-block-source">
      <!-- 展示组件 -->
      <slot name="showComp"></slot>
    </div>

    <div class="demo-block-meta" :style="codeStyle">
      <div class="demo-block-code-main" :ref="'codeMainEl'+compId">
        <!-- 代码展示和描述 -->
        <div class="description">
          <slot name="desc"></slot>
        </div>

        <div class="highlight">
          <slot name="highlight"></slot>
        </div>
      </div>
    </div>

    <div class="demo-show-code" @click="showOrClose">
      <span>{{codeBtnText}}</span>
    </div>

  </div>
</template>

<script>
export default {
  props: {
    compId: {
      type: String,
      // 声明这个参数是否必须传入
      required: true
    }
  },
  setup(props) {},
  beforeCreate() {},
  created() {},
  mounted() {},
  data() {
    return {
      codeBtnText: '显示代码',
      codeStyle: 'height:0px',
      visible: false
    }
  },
  // 计算属性get set形式，结果会被缓存，箭头函数this指向不是vue实例，第一个参数vm才是，如果是正常函数this是正常的指向vue实例
  computed: {
    codeElHeight() {
      return this.$refs['codeMainEl' + this.compId]['clientHeight']
    }
  },
  methods: {
    showOrClose() {
      this.visible = !this.visible
      if (!this.visible) {
        this.codeBtnText = '显示代码'
        this.codeStyle = 'height:0'
      } else {
        let height = this.codeElHeight
        this.codeBtnText = '隐藏代码'
        this.codeStyle = `height:${height}px`
      }
    }
  }
}
</script>
<style scoped>
.demo-block-meta .description {
  padding: 12px 12px 0px 12px;
}

.demo-block-meta .highlight {
  padding: 0px 12px 12px 12px;
}

/* 显示代码按钮 */
.demo-show-code {
  width: 100%;
  height: 35px;
  text-align: center;
  cursor: pointer;
  line-height: 35px;
  font-size: 12px;
  color: #409eff;
  font-weight: 500;
  transition: opacity 0.3s;
  opacity: 0.3;
}

.demo-show-code:hover {
  opacity: 1;
}

.demo-block-code-main {
  height: auto;
  width: 100%;
}

.demo-block {
  border: 1px solid #ebedf0;
  border-radius: 2px;
  display: inline-block;
  width: 100%;
  position: relative;
  margin: 8px 0 16px;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  border-radius: 2px;
}
.demo-block p {
  padding: 0;
  margin: 0;
}
.demo-block .demo-block-code-icon {
  position: absolute;
  right: 16px;
  bottom: 14px;
  cursor: pointer;
  width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
}
.demo-block .demo-block-code-icon img {
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  max-width: 100%;
  width: 100%;
  vertical-align: baseline;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.demo-block .demo-block-source {
  border-bottom: 1px solid #ebedf0;
  padding: 20px 24px 20px;
  color: #444;
  position: relative;
  margin-bottom: -1px;
}
.demo-block .demo-block-meta {
  position: relative;
  border-radius: 0 0 2px 2px;
  -webkit-transition: background-color 0.4s;
  transition: background-color 0.4s;
  width: 100%;
  height: 0;
  overflow: hidden;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 14px;
  color: #444;
  font-size: 14px;
  line-height: 2;
  border-radius: 0;
  border-bottom: 1px dashed #ebedf0;
  margin-bottom: -1px;
  transition: height 0.3s;
}

.demo-block .demo-block-code {
  background-color: #f7f7f7;
  font-size: 0;
}
.demo-block .demo-block-code code {
  background-color: #f7f7f7;
  font-family: Consolas, Menlo, Courier, monospace;
  border: none;
  display: block;
  font-size: 14px;
  padding: 16px 32px;
}
.demo-block .demo-block-code pre {
  margin: 0;
  padding: 0;
}
.sh-checkbox {
  color: #444;
  font-weight: 500;
  font-size: 14px;
  position: relative;
  cursor: pointer;
  display: inline-block;
  white-space: nowrap;
  user-select: none;
}
</style>